<template>
  <Container>
    <div class="container-header title title-center" slot="header">
      <!-- {{edit.couponName}} -->
      <Button size="large" class="fl btn-back"  icon="ios-arrow-back" @click="$router.back()">返回</Button>
    </div>
    <Tabs @on-click="onChangeTab">
      <TabPane name="tab1" label="基本信息">
        <div class="bg-light mt">
          <Form :label-width="130">
            <Row>
              <Col span="8">
                <FormItem v-for="item in list.info.col1" :key="item.id" :label="`${item.label}: `">{{item.data || '-'}}</FormItem>
              </Col>
              <Col span="8">
                <FormItem v-for="item in list.info.col2" :key="item.id" :label="`${item.label}: `">{{item.data || '-'}}</FormItem>
              </Col>
              <Col span="8">
                <FormItem v-for="item in list.info.col3" :key="item.id" :label="`${item.label}: `">{{item.data || '-'}}</FormItem>
              </Col>
              <!-- <Col span="8">
                <FormItem v-for="item in list.info.col4" :key="item.id" :label="`${item.label}: `">{{item.data || '-'}}</FormItem>
              </Col> -->
            </Row>
          </Form>
        </div>
      </TabPane>
      <TabPane name="tab2" label="操作日志">
        <Table
          stripe
          :columns="list.columns"
          :height="options.tableHeight"
          :data="list.data"
          no-data-text="亲，没有找到相关记录哦！~">
        </Table>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import listData from './CouponStoreSummaryDetailData'
export default {
  data() {
    return {
      couponCode: this.$route.query.code,
      couponId: this.$route.query.id,
      list: listData,
      options: {
        tableHeight: 300
      },
      couponDiscountTypeMap: {
        DENOMINATION_COUPON: '满减券',
        DISCOUNT_COUPON: '折扣券',
        CASH_COUPON: '现金券'
      },
      statusMap: {
        PENDING_ACTIVATED: '待激活',
        USABLE: '可使用',
        USED: '已使用',
        INVALID: '已作废',
        OVERDUE: '已过期'
      },
      sourceTypeMap: {
        FACTORY_ORDER_GIFT_COUPON: '工厂促销活动下单送券',
        FULL_COUPON_ORDER_GIFT_COUPON: '满额返券活动下单送券',
        USER_RECEIVE_GIFT_COUPON: '用户领券',
        SUPPLIER_GIFT_COUPON: '品牌商送券',
        DISTRIBUTOR_GIFT_COUPON: '经销商送券',
        SUPPLIER_BINDING_BARCODE_GIFT_COUPON: '品牌商送券并绑定条码',
        DISTRIBUTOR_BINDING_BARCODE_GIFT_COUPON: '经销商送券并绑定条码'
      },
      settlementStatusMap: {
        NO_SETTLEMENT_TIME: '未到结算时间',
        PENDING_SETTLEMENT: '待结算',
        SETTLED: '已结算'
      }
    }
  },
  mounted() {
    this.getDatail()
  },
  methods: {
    getDatail () {
      this.$ajaxGet(`/coupon/coupon_receive/detail/${this.couponCode}`).then(res => {
        this.list.info.col1.forEach(item => {
          if (item.key === 'couponDiscountType' || item.key === 'status' || item.key === 'sourceType') { //优惠券类型 状态 来源类型
            item.data = this[`${item.key}Map`][res[item.key]]
          } else if (item.key === 'couponValue') { //优惠金额
            switch (res.couponDiscountType) {
              case 'DISCOUNT_COUPON':
                const length = res.discountGroupList.length 
                if (length === 1) {
                  item.data = `${res.discountGroupList[0].discount}折`
                } else {
                  item.data = `${res.discountGroupList[0].discount} - ${res.discountGroupList[length - 1].discount}折`
                }
                break
              case 'DENOMINATION_COUPON':
                item.data = `${res.denomination}元/满${res.useCondition}元`
                break
              case 'CASH_COUPON':
                item.data = `${res.denomination}元`
                break
            }
          } else {
            item.data = res[item.key]
          }
        })
        this.list.info.col2.forEach(item => {
          if (item.key === 'settlementStatus') { //结算
            item.data = this[`${item.key}Map`][res[item.key]]
          } else if (item.key === 'productName' || item.key === 'barCode') {
            // 如果是通过订单赠送的优惠券，商品展示用文案“订单送券”样式展示，条码也是“订单送券”
            //couponActivateType= 'ACTIVITY_FULL_GIFT_COUPON'  则代表是 通过订单赠送的优惠券
            item.data = res.couponActivateType === 'ACTIVITY_FULL_GIFT_COUPON' ? '订单送券' : res[item.key]
          } else {
            item.data = res[item.key]
          }
        })
        this.list.info.col3.forEach(item => {
          item.data = res[item.key]
        })
      })
    },
    getLog () {
      this.$ajaxGet(`/coupon/coupon_operateLog/queryAllLog/${this.couponId}`).then(res => {
        this.list.data = res || []
      })
    },
    onChangeTab (tab) {
      if (tab === 'tab1') {
        this.getDatail()
      } else {
        this.getLog()
      }
    }
  },
}
</script>
